<div [@routerTransition]>
    <h1>商品列表</h1>
    <div class="row">
        <div class="col-md-12">
            <button data-toggle="modal" class="btn btn-primary pull-right btn-sm" (click)="createProduct()"><i class="fa fa-plus"></i> 新增商品</button>
            <table class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <td>*</td>
                        <td>*</td>
                        <th>商品名称</th>
                        <th *ngIf="isJewelry(condition.productType)">商品类别</th>
                        <th>状态</th>
                        <th>总数量</th>
                        <th>售出量</th>
                        <th>转发量</th>
                        <th>点击量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let product of productList.items">
                        <td>{{product.id}}</td>
                        <td class="thumbnail">
                            <img *ngIf="product.headerImageId" [src]="downloadUrl+product.headerImageId" alt="">
                            <img *ngIf="!product.headerImageId" src="../../../assets/app-logo-small.png" alt="">
                        </td>
                        <td>{{product.name}}</td>
                        <td *ngIf="isJewelry(condition.productType)">{{product.category}}</td>
                        <td>{{getStatusText(product.status)}}</td>
                        <td>{{product.totalCount}}</td>
                        <td>{{product.saledCount}}</td>
                        <td>{{product.forwardedCount}}</td>
                        <td>{{product.clickCount}}</td>
                        <td>
                            <div class="btn-group" dropdown>
                                <button dropdownToggle type="button" class="btn btn-sm btn-primary dropdown-toggle">
    操作 <span class="caret"></span>
  </button>
                                <ul *dropdownMenu class="dropdown-menu" role="menu">
                                    <li role="menuitem">
                                        <a class="dropdown-item" (click)="createProduct(product.id)">修改</a>
                                    </li>
                                    <li role="menuitem">
                                        <a class="dropdown-item" (click)="addToInventor(product.id)">添加库存</a>
                                    </li>
                                    <li role="menuitem">
                                        <a class="dropdown-item" (click)="toggleTheShelf(product)">{{product.status==0?"下架":"上架"}}</a>
                                    </li>
                                    <li class="divider dropdown-divider"></li>
                                    <li role="menuitem">
                                        <a class="dropdown-item" (click)="deleteProduct(product.id)">删除</a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="row">
                <div class="col-md-12 pull-right">
                    <pagination [boundaryLinks]="true" [maxSize]="5" [totalItems]="productList?.totalCount" [(ngModel)]="currentPage" class="pagination-sm" [boundaryLinks]="true" [rotate]="false" previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                        (pageChanged)="pageChanged($event)"></pagination>
                </div>
            </div>
        </div>
    </div>
</div>
<app-product-add #createProductModal (modalSave)="getProducts()">
</app-product-add>
<app-product-inventor #addToInventorModal (modalSave)="getProducts()">
</app-product-inventor>